<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="params.merchantNo" placeholder="店铺名称" filterable clearable class="filter-item" style="width: 200px">
        <el-option v-for="item in shopListAll" :key="item.key" :label="item.merchantName" :value="item.merchantNo" />
      </el-select>
      <el-date-picker
              v-model="modDateValue"
              class="filter-item"
              :editable="false"
              :clearable="false"
              value-format="timestamp"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 380px;">
      </el-date-picker>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
      <el-button class="filter-item" icon="el-icon-download" @click="getDailyStatExpor">导出</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="daylist"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50">
      </el-table-column>
      <el-table-column
          prop="merhcnatName"
          label="商户全称"
          align="center">
      </el-table-column>
      <el-table-column
          prop="payAmount"
          label="支付金额"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="payCount"
          label="支付笔数"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="firAgentIncome"
          label="代理商收入"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="refundAmount"
          label="退款金额"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="refundCount"
          label="退款笔数"
          align="center"
          width="120">
      </el-table-column>
            <el-table-column
          fixed="right"
          label="操作"
          width="150"
          align="center">
          <template slot-scope="scope">
              <el-button v-if="btnPower.GatherShopDayInfo" type="primary" @click="getShopDayInfo(scope.row)" size="mini">详情</el-button>
          </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.current" :limit.sync="params.size" @pagination="getDaylist" />
  </div>
</template>

<script>
import { dailyStat,merchantShopAll,dailyStatExpor } from "@/api/api.verify.js"
import Pagination from '@/components/Pagination'

export default {
  components:{Pagination},
  name: 'GatherDay',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      listLoading: true,
      daylist: [],//店铺日汇总列表
      total:0,//总条数
      shopListAll:[],//所有店铺名称列表
      modDateValue: [this.common.getTimeStamp0(-1)*1000,this.common.getTimeStamp24(-1)*1000],//日期
      params:{
        current: 1,
        size: 10,
        merchantNo:null,//店铺编号
        bgnStatTime:this.common.getTimeStamp0(-1),//开始时间
        endStatTime:this.common.getTimeStamp24(-1),//结束时间
      },//查询条件
    }
  },
  created() {
    this.getStart()
  },
  methods: {
    getStart(){//初始化
      this.getShopListAll()
      this.getDaylist()
    },
    getShopListAll(){//获取所有店铺名称列表
      let _this=this;
      merchantShopAll({}).then(d=>{
        _this.shopListAll=d.data
      })
    },
    getDaylist(){//获取日汇总列表
      let _this=this;
      let data=this.params;
      this.listLoading = true
      dailyStat(data).then(d=>{
        _this.daylist=d.data.records
        _this.total=Number(d.data.total)
      }).finally(d=>{
        _this.listLoading = false
      })
    },
    getSearch(){//查询
      this.params.current=1
      this.getDaylist()
    },
    getDailyStatExpor(){//下载日汇总表单
      let _this=this;
      let data={};
      data.merchantNo=this.params.merchantNo
      data.bgnStatTime=this.params.bgnStatTime
      data.endStatTime=this.params.endStatTime
      dailyStatExpor(data).then(d=>{
      var blob = new Blob([d], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'})
      var url = window.URL.createObjectURL(blob);
      var aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = url;
      aLink.setAttribute("download", _this.common.getLocalTime(_this.params.bgnStatTime*1000,1)+'至'+_this.common.getLocalTime(_this.params.endStatTime*1000,1)+' '+"日汇总.csv");
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink); //下载完成移除元素
      window.URL.revokeObjectURL(url); //释放掉blob对象
      })
    },
    getShopDayInfo(e){//跳转店铺日汇总页
      let route=this.$router.resolve({path:'GatherShopDayInfo', query: {merhcnatName:e.merhcnatName, merchantNo: e.merchantNo } })
      window.open(route.href, '_blank')
    }
  },
  watch:{
    'params.merchantNo':function(val){
      let _this=this;
      if(val==""){
        _this.params.merchantNo=null
      }
    },
    modDateValue: function () {
        if (this.modDateValue == null) {
            this.params.bgnStatTime = this.common.getTimeStamp0(-1)
            this.params.endStatTime = this.common.getTimeStamp24(-1)
            return
        }
        this.params.bgnStatTime = parseInt(this.modDateValue[0] / 1000)
        this.params.endStatTime = parseInt(this.modDateValue[1] / 1000)
    },
  }
}
</script>
